<!-- 日志详情 -->
<template>
  <div class="div_box">
    <div style="min-width: 1600px;">
      <el-container>
        <el-divider content-position="left">执行信息</el-divider>
        <el-header height="120">
          <el-descriptions>
            <el-descriptions-item label="用例名称">{{ logEntity.caseName }}</el-descriptions-item>
            <el-descriptions-item label="用例编号">{{ logEntity.caseNum }}</el-descriptions-item>
            <el-descriptions-item label="执行结果">
              <el-tag v-if="logEntity.result === 1" type="success">已通过</el-tag>
              <el-tag v-if="logEntity.result === 0" type="info">未执行</el-tag>
              <el-tag v-if="logEntity.result === 3" type="warning">阻塞中</el-tag>
              <el-tag v-if="logEntity.result === 2" type="danger">已失败</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="关联任务">{{ logEntity.taskName }}</el-descriptions-item>
            <el-descriptions-item label="关联需求">{{ logEntity.demandName }}</el-descriptions-item>
            <el-descriptions-item label="执行时间">{{ logEntity.time }}</el-descriptions-item>
          </el-descriptions>
        </el-header>
        <el-divider content-position="left">日志详情</el-divider>
        <el-main>
          <el-tabs v-model="activeName" tab-position="right">
            <el-tab-pane label="日志视图" name="log">
              <div class="logPageContain">
                <el-tabs v-model="defaultStep" tab-position="left">
                  <el-tab-pane label="BeforeClass" name="BeforeClass">
                    <!-- BeforeClass -->
                    <div v-for="(logContent, index_1) in logDetail.beforeClassContents" :key="index_1" class="BeforeClass">
                      <h4>{{ logContent.method }}</h4>
                      <div>
                        <!-- 默认的步骤名称不需要 -->
                        <!-- <b class="STEP">步骤描述：{{ logContent.reportStep.step }}</b> -->
                        <ul>
                          <li v-for="(content, index_1_1) in logContent.reportStep.contents" :key="index_1_1">
                            <div v-if="content.contentType === 'LOG'" :class="content.level">
                              [{{ content.level }}] {{ content.value }}
                              <br>
                              <a v-if="content.type === 'PIC'" :href="getImgUrl(content.value)" target="_blank">
                                <img class="logImg" :src="getImgUrl(content.value)">
                              </a>
                            </div>
                            <div v-if="content.contentType === 'STEP'">
                              <log-content :report-step="content" />
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="BeforeMethod" name="BeforeMethod">
                    <!-- BeforeMethod -->
                    <div v-for="(logContent, index_1) in logDetail.beforeMethodContents" :key="index_1" class="BeforeMethod">
                      <h4>{{ logContent.method }}</h4>
                      <div>
                        <!-- 默认的步骤名称不需要 -->
                        <!-- <b class="STEP">步骤描述：{{ logContent.reportStep.step }}</b> -->
                        <ul>
                          <li v-for="(content, index_1_1) in logContent.reportStep.contents" :key="index_1_1">
                            <div v-if="content.contentType === 'LOG'" :class="content.level">
                              [{{ content.level }}] {{ content.value }}
                              <br>
                              <a v-if="content.type === 'PIC'" :href="getImgUrl(content.value)" target="_blank">
                                <img class="logImg" :src="getImgUrl(content.value)">
                              </a>
                            </div>
                            <div v-if="content.contentType === 'STEP'">
                              <log-content :report-step="content" />
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="OnTest" name="OnTest">
                    <!-- OnTest -->
                    <div v-for="(logContent, index_1) in logDetail.testContents" :key="index_1" class="OnTest">
                      <h4>【用例名称】{{ logContent.caseName }}</h4>
                      <h4>【用例编号】{{ logContent.caseNum }} 【方法】{{ logContent.method }} 【用例级别】{{ logContent.priority }}</h4>
                      <div>
                        <!-- 默认的步骤名称不需要 -->
                        <!-- <b class="STEP">步骤描述：{{ logContent.reportStep.step }}</b> -->
                        <ul>
                          <li v-for="(content, index_1_1) in logContent.reportStep.contents" :key="index_1_1">
                            <div v-if="content.contentType === 'LOG'" :class="content.level">
                              [{{ content.level }}] {{ content.value }}
                              <br>
                              <a v-if="content.type === 'PIC'" :href="getImgUrl(content.value)" target="_blank">
                                <img class="logImg" :src="getImgUrl(content.value)">
                              </a>
                            </div>
                            <div v-if="content.contentType === 'STEP'">
                              <log-content :report-step="content" />
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="AfterMethod" name="AfterMethod">
                    <!-- AfterMethod -->
                    <div v-for="(logContent, index_1) in logDetail.afterMethodContents" :key="index_1" class="AfterMethod">
                      <h4>{{ logContent.method }}</h4>
                      <div>
                        <!-- 默认的步骤名称不需要 -->
                        <!-- <b class="STEP">步骤描述：{{ logContent.reportStep.step }}</b> -->
                        <ul>
                          <li v-for="(content, index_1_1) in logContent.reportStep.contents" :key="index_1_1">
                            <div v-if="content.contentType === 'LOG'" :class="content.level">
                              [{{ content.level }}] {{ content.value }}
                              <br>
                              <a v-if="content.type === 'PIC'" :href="getImgUrl(content.value)" target="_blank">
                                <img class="logImg" :src="getImgUrl(content.value)">
                              </a>
                            </div>
                            <div v-if="content.contentType === 'STEP'">
                              <log-content :report-step="content" />
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="AfterClass" name="AfterClass">
                    <!-- AfterClass -->
                    <div v-for="(logContent, index_1) in logDetail.afterClassContents" :key="index_1" class="AfterClass">
                      <h4>{{ logContent.method }}</h4>
                      <div>
                        <!-- 默认的步骤名称不需要 -->
                        <!-- <b class="STEP">步骤描述：{{ logContent.reportStep.step }}</b> -->
                        <ul>
                          <li v-for="(content, index_1_1) in logContent.reportStep.contents" :key="index_1_1">
                            <div v-if="content.contentType === 'LOG'" :class="content.level">
                              [{{ content.level }}] {{ content.value }}
                              <br>
                              <a v-if="content.type === 'PIC'" :href="getImgUrl(content.value)" target="_blank">
                                <img class="logImg" :src="getImgUrl(content.value)">
                              </a>
                            </div>
                            <div v-if="content.contentType === 'STEP'">
                              <log-content :report-step="content" />
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-tab-pane>
            <el-tab-pane label="脚本视图" name="script">
              <div class="logPageContain">
                <editor ref="textView" v-model="script" lang="java" theme="eclipse" width="100%" height="650px" :options="editorOptions" @init="editorInit" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import { getLogPath } from '@/api/auto/log.js'
import LogContent from './case-log-content'
export default {
  name: 'AutoCaseLogDetail',
  components: {
    editor: require('vue2-ace-editor'),
    LogContent
  },
  data() {
    return {
      logId: null,
      logPath: 'todo',
      logDetail: {},
      logEntity: {},
      activeName: 'log',
      defaultStep: 'OnTest',
      script: '',
      readOnly: true,
      stripe: true,
      editorOptions: { enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, enableEmmet: true, useElasticTabstops: true }
    }
  },
  created() {
    this.logId = this.$route.params.logId
    this.getLogPath()
  },
  methods: {
    editorInit() {
      require('brace/ext/language_tools') // language extension prerequsite...
      require('brace/mode/json')
      require('brace/mode/javascript') // language
      require('brace/mode/java') // language
      require('brace/mode/less')
      require('brace/theme/eclipse')
      require('brace/snippets/javascript') // snippet
    },
    getLogPath() {
      getLogPath(this.$route.params.logId).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.logPath = data.logPath
          this.logDetail = JSON.parse(data.logDetail)
          this.logEntity = data.logEntity
          this.script = this.logDetail.script
        } else {
          this.$message.error(respnose.message)
          this.logPath = 'todo'
          this.logDetail = {}
        }
      })
    },
    getImgUrl(name) {
      return '/file/' + this.logPath + '/' + name
    }
  }
}
</script>

<style scoped="scoped">
  .STEP {
    color: #ff00ff;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .INFO {
    color: #00ff00;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .DEBUG {
    color: #00ff00;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .WARN {
    color: #dede00;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;padding: 5px, 0px;
  }

  .ERROR {
    color: #ff0000;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .logImg {
    border-style: solid;
    border-width: 1px;
    height: 250px;
  }

  .div_box {
    border: 1px solid #eee;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
  }
</style>
